<template>
  <AvicModal
    :visible="true"
    :title="title"
    :width="width"
    :height="height"
    :body-style="{ padding: '16px' }"
    class="model-body"
    :centered="true"
    :adjust-size="false"
    @cancel="closeModal"
  >
    <div v-if="!async" class="content-wrapper">
      <!-- 表格 -->
      <div class="table-wrapper" style="padding: 0">
        <AvicTable
          ref="avicTable"
          row-key="id"
          :bordered="true"
          :columns="columns"
          :data-source="list"
          :loading="loading"
          :page-parameter="queryParam.pageParameter"
          :total="total"
          :show-table-setting="false"
          @refresh="getList"
          @change="handleTableChange"
        >
          <template v-slot:toolBarLeft>
            <a-space>
              <a-button
                title="导入"
                type="primary"
                class="excel-import-btn"
                ghost
                style="color: #245bdb; border-color: #245bdb; background-color: white"
                :disabled="importDisabled"
                @click="importFile"
              >
                <template #icon>
                  <avic-icon svg="avic-logout-box-line" />
                </template>
                导入
              </a-button>
              <AvicUploader
                ref="avicEditUploaderFile"
                :element-id="elementId"
                form-type="add"
                :form-id="formId"
                table-name="EXCEL_IMPORT_TABLE"
                :multiple="false"
                :file-size-limit="fileSizeLimit"
                :allow-delete="true"
                :upload-timeout="300000"
                timeout-message="上传文件过大，请稍后在【查看导入结果】中查看上传情况"
                :colspan="1"
                :upload-url="importUrl"
                :file-num-limit="2"
                upload-type="excel"
                :show-size="false"
                :use-form-info-param="false"
                :validate-secret-before-upload="false"
                :need-upload-loading-status="false"
                :show-creation-name-and-date="false"
                @afterUpload="afterUpload"
                @filesChange="filesChange"
              />
              <!-- icon 还未导入 icon="import"  -->
            </a-space>
          </template>
          <template v-slot:toolBarRight>
            <!-- 图标还未导入 icon="download" -->
            <span>支持xlsx格式</span>
            <a-button ghost type="link" title="下载模板" style="color: #245bdb; background-color: white" @click="downLoadFile">
              下载模板
            </a-button>
          </template>
          <template #bodyCell="{ column, record, index, text }">
            <template v-if="column.dataIndex === 'ids'">
              <span :title="index + 1 + queryParam.pageParameter.rows * (queryParam.pageParameter.page - 1)">
                {{ index + 1 + queryParam.pageParameter.rows * (queryParam.pageParameter.page - 1) }}
              </span>
            </template>
            <template v-else-if="column.dataIndex === 'download'">
              <font v-if="record.failCount == 0" style="color: green" title="导入成功">
                <span style="padding: 0 8px">导入成功</span>
              </font>
              <a-button
                v-else
                class="table-detail-link inner-btn"
                style="color: red"
                type="link"
                title="失败【查看】"
                @click="handleDownload(record)"
              >
                失败【查看】
              </a-button>
            </template>
            <template v-else-if="column.dataIndex === 'action'">
              <a-button type="link" class="inner-btn" @click="handleDelete([record.id])">删除</a-button>
            </template>
            <template v-else-if="column.dataIndex === 'lastUpdateDate'">
              <span :title="formatDate(text, 'YYYY-MM-DD HH:mm:ss')">
                {{ formatDate(text, 'YYYY-MM-DD HH:mm:ss') }}
              </span>
            </template>
          </template>
        </AvicTable>
      </div>
    </div>
    <template v-else>
      <div class="upload-simplicity">
        <a-space>
          <a-button title="导入" type="primary" class="excel-import-btn" :disabled="importDisabled" @click="importFile">
            <template #icon>
              <avic-icon svg="avic-logout-box-line" />
            </template>
            导入
          </a-button>
          <div>
            <span>支持xlsx格式</span>
            <a-button ghost type="link" title="下载模板" style="color: #245bdb; background-color: white" @click="downLoadFile">
              下载模板
            </a-button>
          </div>
          <!-- icon 还未导入 icon="import"  -->
        </a-space>
        <AvicUploader
          ref="avicEditUploaderFile"
          :element-id="elementId"
          form-type="add"
          :form-id="formId"
          table-name="EXCEL_IMPORT_TABLE"
          :multiple="false"
          :file-size-limit="fileSizeLimit"
          :allow-delete="true"
          :upload-timeout="300000"
          timeout-message="上传文件过大，请稍后在【查看导入结果】中查看上传情况"
          :colspan="1"
          :upload-url="importUrl"
          :file-num-limit="2"
          upload-type="excel"
          :show-size="false"
          :use-form-info-param="false"
          :validate-secret-before-upload="false"
          :need-upload-loading-status="false"
          :show-creation-name-and-date="false"
          @afterUpload="afterUpload"
          @filesChange="filesChange"
        />
      </div>
    </template>
    <template #footer>
      <a-button title="返回" @click="closeModal">返回</a-button>
    </template>
  </AvicModal>
</template>
<script lang="ts" setup>
import { download } from '@/utils/download-util';
import type { downloadParam } from '@/utils/download-util';
import { getExcelImportHis, downloadErrorFile, delExcelImportHis } from '@/api/avic/system/AvicImportApi';
// 引入公共方法
import { formatDate } from '@/utils/common-util';
import { ref } from 'vue';
const { proxy } = getCurrentInstance();
const props = defineProps({
  /** 弹框title */
  title: { type: String, required: false, default: 'EXCEL导入' },
  /** excel导入需要传入后台的参数对象，JSON格式 */
  formData: { type: Object, required: true },
  /** 下载模板接口地址 */
  downloadTemplateUrl: { type: String, required: false, default: '' },
  /** 导入接口地址 */
  importUrl: { type: String, required: true, default: '' },
  /** 是否异步导入 */
  async: { type: Boolean, required: false, default: false },
   /** 文件大小 单位 mb 默认10mb */
  fileSizeLimit: { type: Number, default: 10 }
});
const width = ref('960px');
const height = ref('520px');
if (props.async) {
  width.value = '640px';
  height.value = '320px';
}
/**
 * close 关闭导入组件回调
 * reloadData 刷新父组件表格数据回调
 */
const $emit = defineEmits(['close', 'reloadData']);
const columns = [
  {
    title: '序号',
    dataIndex: 'ids',
    width: 60,
    align: 'center',
    ellipsis: true,
    fixed: 'left'
  },
  {
    title: '成功数',
    dataIndex: 'successCount',
    width: 120,
    align: 'right',
    ellipsis: true
  },
  {
    title: '失败数',
    dataIndex: 'failCount',
    width: 120,
    align: 'right',
    ellipsis: true
  },
  {
    title: '导入用户',
    dataIndex: 'opetatorPerson',
    width: 120,
    ellipsis: true
  },
  {
    title: '导入时间',
    dataIndex: 'lastUpdateDate',
    width: 150
  },
  {
    title: '下载',
    dataIndex: 'download',
    width: 120,
    ellipsis: true
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: 100,
    align: 'center',
    ellipsis: true
  }
];
const elementId = '0';
const queryForm = ref({});
const queryParam = reactive({
  // 请求表格数据参数
  pageParameter: {
    page: 1, // 页数
    rows: 20 // 每页条数
  },
  searchParams: {
    ...queryForm
  },
  keyWord: ref(''), // 快速查询数据
  sidx: null, // 排序字段
  sord: null // 排序方式: desc降序 asc升序
});
const list = ref([]); // 表格数据集合
const selectedRowKeys = ref([]); // 选中数据主键集合
const selectedRows = ref([]); // 选中数据集合
const loading = ref(false); // 表格loading状态
const formId = ref('fileInfo');
const importDisabled = ref(false);
const total = ref(0);
const avicEditUploaderFile = ref();
onMounted(() => {
  // 加载表格数据
  getList();
});
/** 查询数据  */
function getList() {
  selectedRowKeys.value = []; // 清空选中 // 清空选中
  selectedRows.value = [];
  loading.value = true;
  getExcelImportHis(queryParam, props.formData.tableName)
    .then((response) => {
      list.value = response.data.result;
      total.value = response.data.pageParameter.totalCount;
      loading.value = false;
    })
    .catch(() => {
      list.value = [];
      total.value = 0;
      loading.value = false;
    });
}
/** 点击返回、点击X关闭事件 */
function closeModal() {
  $emit('close');
}
/** 下载模板 */
function downLoadFile() {
  loading.value = true;
  // 暂时未引入download
  const downloadDto = {
    url: props.downloadTemplateUrl,
    data: null,
    method: 'GET'
  } as downloadParam;
  download(downloadDto).then(() => {
    loading.value = false;
  });
}
/** 导入模板 */
function importFile() {
  if (avicEditUploaderFile.value.filesCount === 0) {
    proxy.$message.warning('请选择要导入的文件！');
  } else {
    loading.value = true;
    setUploadData();
    avicEditUploaderFile.value.upload(formId.value);
    importDisabled.value = true;
  }
}
/** 设置上传文件的参数 */
function setUploadData() {
  avicEditUploaderFile.value?.files['0'].map((tim) => {
    if (!tim.complete) {
      tim.data.impExcelFile = avicEditUploaderFile.value.filesBind[0].file;
      tim.data.formData = JSON.stringify(props.formData);
    }
    return tim;
  });
}
/**
 * 下载错误数据
 * @param data 错误数据
 */
function handleDownload(data) {
  loading.value = true;
  const param = `${data.id}?fileName=${data.fileUrl}`;
  loading.value = false;
  downloadErrorFile(param).then(() => {
    loading.value = false;
  });
}
/**
 * 删除导出记录
 * @param ids 选中数据
 */
function handleDelete(ids) {
  if (ids.length === 0) {
    proxy.$message.warning('请选择要删除的数据！');
    return;
  }
  proxy.$confirm({
    title: '确定要删除选择的数据吗？',
    okText: '确定',
    cancelText: '取消',
    onOk: () => {
      loading.value = true;
      delExcelImportHis(ids.join(','))
        .then((res) => {
          if (res.success) {
            proxy.$message.success('删除成功！');
            getList();
          }
          loading.value = false;
        })
        .catch(() => {
          loading.value = false;
        });
    }
  });
}
/**
 * 导入后提示信息
 * @param successFile 导入成功的数据
 * @param errorFiles 导入失败的数据
 */
function afterUpload(successFile, errorFiles) {
  if (props.async) {
    proxy.$confirm({
      title: '提示',
      content: '文件异步导入中，是否前往文件中心查看导入结果？',
      okText: '前往',
      cancelText: '取消',
      onOk: () => {
        proxy.$router.push('/sysdownloadfiles?activeTab=2');
      }
    });
    // 异步导入直接关闭页面
    closeModal();
    return;
  }
  loading.value = false;
  importDisabled.value = false;
  avicEditUploaderFile.value.removeAll(elementId);
  if (errorFiles.length > 0) {
    const errorResult = errorFiles[errorFiles.length - 1].response;
    let message = errorResult.errorDesc;
    if (!message) {
      message = '上传失败！';
    }
    proxy.$message.warning({
      class: 'errorBody',
      title: '导入异常',
      content: message
    });
    getList();
    return;
  }
  const result = successFile[successFile.length - 1].response.responseBody;
  if (result) {
    proxy.$message.info(typeof result === 'string' ? result : result.message);
    getList();
    $emit('reloadData');
  } else {
    proxy.$message.error('导入失败');
  }
}
/** 改变导入按钮禁用状态 */
function filesChange() {
  avicEditUploaderFile.value.removeAll(elementId);
  importDisabled.value = false;
}
/**
 * 表头排序
 * @param pagination 分页数据
 * @param sorter 排序方式
 */
function handleTableChange(pagination, _filters, sorter) {
  queryParam.pageParameter.page = pagination.current;
  queryParam.pageParameter.rows = pagination.pageSize;
  if (proxy.$objIsNotBlank(sorter.field)) {
    queryParam.sidx = sorter.field;
    queryParam.sord = sorter.order === 'ascend' ? 'asc' : 'desc'; // 排序方式: desc降序 asc升序
  }
  getList();
}
</script>
<style lang="less" scoped>
:deep(.avic-upload) {
  .ant-btn-primary {
    color: @primary-color;
    background: #fff;
    cursor: pointer;
  }
  display: inline-flex;
  .ant-alert-info {
    display: none;
  }
  .file-open {
    display: none;
  }
  .file-list {
    margin: 0;
    padding: 5px;
    display: flex;
  }
}
.upload-simplicity {
  .ant-space {
    margin-bottom: 8px;
  }
  :deep(.avic-upload) {
    align-items: flex-start;
    flex-direction: column;
    .button-box {
      border: 1px solid @primary-color;
      border-radius: @border-radius-base;
      margin-bottom: 8px;
    }
  }
}
</style>

<style lang="less">
.model-body {
  .ant-modal-body {
    padding: 16px;
  }
}
.errorBody .ant-modal-confirm-content {
  max-height: 180px;
  overflow: auto;
}
</style>
